<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h1>你好，{{name}}</h1>

    </div>
    <script type="text/javascript">
        /* el的两种写法 */
        /* const x = new Vue({
            // 第一种写法
            // el: '#root',
            data: {
                name: '卜俊杰'
            }
        });
        console.log(x);
        // 第二种写法
        //   x.$mount('#root');
        setTimeout(() => {
            x.$mount('#root');
        }, 1000); */

        /*  data的两种写法 */
        new Vue({
            el: '#root',
            //  第一种写法，对象式
            /* data: {
                name: '卜俊杰'
            } */
            //  第二种写法： 函数式
            /* data: function () {
                // 此处的 this 是 vue 实例对象
                console.log('小伙子哈哈哈', this);
                return {
                    name: 'bujunjie'
                }
            } */
            data() {
                // 此处的 this 是 vue 实例对象
                console.log('小伙子哈哈哈', this);
                return {
                    name: 'bujunjie'
                }
            }

        });
    </script>

</body>

</html>